<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习</title>
</head>

<body>
  <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
  <input id="onPosition" type="button" value="移动位置">
  <input id="onView" type="button" value="修改视野范围">
  <input id="cameraBol" type="button" value="切换相机">
  <script type="module">
    import * as THREE from 'https://threejs.org/build/three.module.js'
    import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js'

    const canvas = document.querySelector('#c2d')
    // 渲染器
    const renderer = new THREE.WebGLRenderer({ canvas })

    const fov = 40 // 视野范围
    const aspect = 2 // 相机默认值 画布的宽高比
    const near = 0.1 // 近平面
    const far = 1000 // 远平面
    // 透视投影相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, fov)
    camera.position.set(0, 10, 20)
    camera.lookAt(0, 0, 0)

    // 点击 移动相机
    document.querySelector('#onPosition').addEventListener('click', function () {
      camera.position.set(0, 20, 20)
    })

    // 控制相机
    const controls = new OrbitControls(camera, canvas)

    // 点击 修改相机 视野范围
    document.querySelector('#onView').addEventListener('click', function () {
      camera.fov = 20
      camera.updateProjectionMatrix()
    })
    
    // 场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color('black')
    
    // 辅助相机
    const camera1 = new THREE.PerspectiveCamera(20, aspect, 10, 50)
    camera1.position.set(0, 5, 20)
    camera1.lookAt(0, 0, 0)
    const cameraHelper = new THREE.CameraHelper(camera1)
    // 辅助线加入 场景
    scene.add(cameraHelper)
    let cameraBol = true
    // 点击 切换相机
    document.querySelector('#cameraBol').addEventListener('click', function () {
      cameraBol = !cameraBol
    })
    
    {
      // 地面 平铺
      const planeSize = 20
      const loader = new THREE.TextureLoader()
      const texture = loader.load('https://threejs.org/manual/examples/resources/images/checker.png')
      texture.wrapS = THREE.RepeatWrapping
      texture.wrapT = THREE.RepeatWrapping
      texture.magFilter = THREE.NearestFilter
      const repeats = planeSize / 2
      texture.repeat.set(repeats, repeats)
      const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize)
      const planeMat = new THREE.MeshPhongMaterial({
        map: texture,
        side: THREE.DoubleSide
      })
      const mesh = new THREE.Mesh(planeGeo, planeMat)
      mesh.rotation.x = Math.PI * -0.5
      scene.add(mesh)
    }

    {
      // 方块
      const cubeSize = 4
      const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)
      const cubeMat = new THREE.MeshPhongMaterial({ color: '#8f4b2e' })
      const mesh = new THREE.Mesh(cubeGeo, cubeMat)
      mesh.position.y = 2
      scene.add(mesh)
    }

    {
      // 灯光
      const color = 0xffffff
      const intensity = 1
      // 方向光
      const light = new THREE.DirectionalLight(color, intensity)
      light.position.set(0, 10, 0)
      light.target.position.set(-5, 0, 0)
      scene.add(light)
      scene.add(light.target)
    }

    // 渲染
    function render() {
      controls.update()
      cameraHelper.update()
      if (cameraBol) {
        renderer.render(scene, camera)
      } else {
        renderer.render(scene, camera1)
      }
      requestAnimationFrame(render)
    }

    requestAnimationFrame(render)
  </script>
</body>

</html>